<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
     <p id="log"></p>
    <script src='../js/ball.js'></script>
    <script src="../js/arrow.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');

            canvas.width = document.body.clientWidth;
            canvas.height = window.screen.availHeight*0.8;
            
           var ball = new Ball(20, "red");
               ball.x = canvas.width/4;
               ball.y = canvas.height/4;

               var f = 0.05, speed = 0, angle = 0;//设定摩擦力

               var vx = Math.random()*10 -5;
               var vy = Math.random()*10 -5;

               (function drawFrame(){
                   window.requestAnimationFrame(drawFrame, canvas);
                   context.clearRect(0, 0, canvas.width, canvas.height);

                   speed = Math.sqrt(vx*vx + vy*vy);
                   angle = Math.atan2(vy, vx);

                   if(speed > f){
                       speed -= f; //通过摩擦力减小速度
                   }else{
                       speed = 0;
                   }

                   vx = Math.cos(angle) * speed;
                   vy = Math.sin(angle) * speed;

                   ball.x += vx;
                   ball.y += vy;

                   ball.draw(context);
               }());

        }
    </script>
</body>
</html>
